<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .active {
                  background-color: #f10;
            }
      </style>
</head>

<body>
      <div class="box">hello world</div>
      <div class="box">hello world</div>
      <div class="box">hello world</div>
      <div class="box">hello world</div>

      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">
      <input type="checkbox">


      <button class="btn" id="btn">点击改变颜色</button>

      <script src="./jquery.js"></script>
      <script>
            // 1.基本属性操作 ; attr  
            // box 加上一条属性 data-id = 10;
            // 除了删除其他的事情这个API都可以完成;
            // $(".box").attr("data-id",10);
            // $(".box").attr({
            //       "data-id":10,
            //       "data-index":0
            // })
            // attr对于批量操作的优化;
            // 属性设置 ，css 对于批量操作的元素都可以传递一个函数进去;

            $(".box").attr({
                  "data-id": 10,
                  // 这是jquery操作每个元素的时候给予的元素下标;
                  "data-index": function (index) {
                        // console.log(arguments);
                        return index;
                  }
            })
            // // 思维发散， 这个东西在css之中可以用么? 
            // $(".box").css({
            //       "color" : function(){
            //             return "#"+(Math.round( Math.random() * parseInt("ffffff",16) ).toString(16)).padStart(6,"0");
            //       }
            // })

            // 获取 :  传递对象或者两个参数表示设置属性, 你传递一个参数就表示获取;
            // 取值时，attr方法只会取一个值;
            var res = $(".box").attr("data-index")
            // console.log(res);

            // 删除属性 : 
            $(".box").removeAttr("data-index");

            // 2.内置属性操作;

            var res = $("input[type=checkbox]").prop("checked")
            console.log(res);
            // removeProp();

            // 3.class类名属性操作;

            // 1. 判定类别; is => 辨别所有的属性 如果存在返回true ，如果不存在返回false;

            // hasClass => class

            $(".btn").click(function () {
                  // 事件处理函数;
                  // this 指向dom对象;  
                  // console.log(this);
                  // 如果想要使用 jqueryAPI 那么需要对 dom对象进行转化;
                  // console.log($(this));
                  // console.log($(this).is(".active"));
                  // console.log($(this).is("#btn"));

                  // if($(this).is(".active")){
                  //       // 如果存在 active 类名那么删除这个类名;
                  //       $(this).removeClass("active")
                  // }else{
                  //       $(this).addClass("active");
                  // }

                  // hasClass 和 is的功能一样，只不过这个API只能判断 class , 同时这个API也不需要选择符;
                  // if($(this).hasClass("active")){
                  //       // 如果存在 active 类名那么删除这个类名;
                  //       $(this).removeClass("active")
                  // }else{
                  //       $(this).addClass("active");
                  // }

                  // 提供了一个自动检测的API : toggle
                  // 自动检测是否存在active , 如果存在就删除;
                  // 如果不存在就添加; 
                  $(this).toggleClass("active");
            })

      </script>
</body>

</html>